<template>
    <div class="slide-box" >
            <!-- 11111------11111 -->
            <div class="slide-unit-xunhuan" v-for="(l,k) in slideList" :key="k">
                <div class="slide-unit" >
                  <div class="su" v-for="(ll,kk) in l" :key="kk">
                    <div class="sus" @click="gotodetail(ll.name)">
                        <img :src="ll.image_url" alt="">
                        <h6 class="van-multi-ellipsis--l2">{{ll.name}}</h6>
                        <p class="susprice1"><span class="suss1">{{ll.price}} ₽</span> <span class="suss2">{{ll.original_price}} ₽</span></p>
                        <p class="susprice2">
                          <span>￥ {{ll.cny_price}}</span>
                        </p>
                    </div>
                  </div>                
                </div>
            </div>
            <!-- 11111------11111 -->
        
            <!-- 查看更多 -->
            <div class="more" @click="gotogoods">
              <div class="morebox">
                <p>查看更多</p>
              </div>
              
            </div>
          </div>
</template>


<script>
export default {
  props:['slideList'],

  methods:{
    gotogoods(){
      this.$router.push({name:'goodslist'})
    },
    gotodetail(name){
      this.$router.push({name:'goodsdetail',query:{name:name}})
    },
  },
}
</script>



<style lang="scss" scoped>
  .slide-box{
        display: flex;
        flex-direction: row;
        overflow: auto;
      .more{
        height: 100%;
        padding: 6px;
        .morebox{
          padding: 6px;
          background-color: #fff;
          p{
          width: 100px;
          line-height: 493px;
          font-size: 16px;
          text-align: center;
        }
        }
        
      }
      
      .slide-unit-xunhuan{
        width: 163px;
        
          .slide-unit{
            width: 163px;
              .su{
                // width: 100%;
                padding: 6px;
                .sus{
                  background-color: #fff;
                  // width: 100%;
                  padding: 6px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  img{
                    width: 100%;
                  }
                  h6{
                    font-size: 15px;
                    color: black;
                    margin-top: 6px;
                  }
                  p{
                    margin-top: 6px;
                    width: 100%;
                  }
                  .susprice1{
                    font-size: 16px;
                    .suss2{
                      color: #b2b2b2;
                      text-decoration: line-through;
                    }
                  }
                  .susprice2{
                    span{
                      font-size: 14px;
                      font-weight: bold;
                      padding: 3px 6px;
                      background-image: linear-gradient(90deg,#fae0a2,#f6cb7c);
                    }
                  }


                }
              }
          }
      }
  }

</style>